<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style>
        body {
            background:gainsboro;
        }

        .grayback{
            background:#f2f2f2;
            color:black;
        }

        .d_title{
            width:70%;
            margin-left:15%;
            margin-top:10px;
            height:30px;
        }

        .title_name{
            text-align: center;
            font-size: 22px;
            font-weight: bold;
            border: 1px dashed gainsboro;
        }

        .faq_box{
            width:70%;
            min-height:70px;
            margin-top:10px;
            margin-left:15%;
            border: 1px dashed gainsboro;
            text-align: left;
        }

        .f_title{
            width:98%;
            height:30px;
            margin-top:5px;
            margin-left:1%;
            font-size: 16px;
            font-weight: bold;
            line-height: 32px;
            border-radius: 5px;
            /*border: 1px solid slateblue;*/
        }

        .f_content{
            width:98%;
            min-height:50px;
            margin-top:2px;
            margin-left:1%;
            font-size: 14px;
            line-height: 28px;
            border-radius: 5px;
            /*border: 1px solid slateblue;*/
        }

        p{
            display:inline-block;
            width:100%;
        }

        p img{
            max-width:95%;
        }

        .f_btn{
            width:98%;
            margin-top:5px;
            margin-bottom:5px;
            margin-left:1%;
            /*border: 1px solid slateblue;*/
        }

        .f_submit,.f_add_submit{
            margin-left:4px;
        }

        .left-10{
            margin-left:10px;
        }

        .f_from{
            width:100%;
            float: right;
            font-size:12px;
            line-height: inherit;
            font-weight: normal;
            text-align: right;
        }

        .font_color{
            color:cornflowerblue;
        }

        .modify_btn{
            font-size:14px;
            color:blue;
            margin-left:5px;
        }

        .del_btn{
            font-size:14px;
            color:red;
            margin-right:5px;
        }


    </style>
</head>
<body>

<div class="box">
    <div class="d_title">
        <div class="title_name">
            {$name}
        </div>
        <input type="hidden" id="groupid" value="{$groupid}">
        <input type="hidden" id="typeid" value="{$typeid}">
    </div>


    {volist name="faq" id="vo"}
    <div class="faq_box show_box">
        <div class="f_title grayback">
            <div class="left-10">
                <div style="float:left;font-weight: bold;" class="show_title">
                    <h4 style="font-weight: bold;">{$vo.title}</h4>
                </div>
                <div class="f_from">
                    由&nbsp;<span class="font_color">{$vo.create_user}</span>&nbsp;于&nbsp;{$vo.createtime}&nbsp;创建
                    <span class="show_update">
                    {if $vo.update_user!==''}
                    &nbsp;&nbsp;
                    <span class="font_color">{$vo.update_user}</span>&nbsp;于&nbsp;<span>{$vo.updatetime}&nbsp;最后修改</span>
                    {/if}
                    </span>
                    <a href="javascript:void(0);" class="modify_btn">编辑</a>
                    <a href="javascript:void(0);" class="del_btn">删除</a>
                </div>
            </div>
        </div>
        <div class="f_content grayback">
            <div class="left-10 show_content">
                {$vo.content}
            </div>
        </div>
    </div>

    <div class="faq_box modify_box" style="display: none;">
        <input type="hidden" class="faq_id" value="{$vo.id}">
        <div class="f_title">
            <h4><input value="{$vo.title}" placeholder="标题" autocomplete="off" class="title layui-input" type="text" style="font-size:14px;"></h4>
        </div>
        <div class="f_content">
            <textarea name="f_content_{$vo.id}" id="f_content_{$vo.id}" placeholder="请输入内容" class="layui-textarea content_text" style="width:100%;">{$vo.content}</textarea>
        </div>

        <div class="f_btn">
            <button class="layui-btn layui-btn-sm f_submit">提交</button>
            <button class="layui-btn layui-btn-sm f_cancle" style="margin-left:2px;">取消</button>
        </div>
    </div>
    {/volist}


    <div class="faq_box add_box" {if !empty($faq)}style="display: none;"{/if}>
        <div class="f_title">
            <h4><input placeholder="请输入标题" autocomplete="off" class="title layui-input" type="text" style="font-size:14px;"></h4>
        </div>
        <div class="f_content">
            <textarea placeholder="请输入内容" id="f_content" class="layui-textarea" style="width:100%;height:300px;"></textarea>
        </div>
        <div class="f_btn">
            <button class="layui-btn layui-btn-sm f_add_submit">提交</button>
            <button class="layui-btn layui-btn-sm f_add_cancle" style="margin-left:2px;">取消</button>
        </div>
    </div>
    <div class="faq_box add_btn_box" {if empty($faq)}style="display: none;"{/if}>
            <div class="f_btn">
                <button class="layui-btn layui-btn-sm f_add_btn">新增FAQ</button>
            </div>
        </div>
        <div style="margin-top:50px;"></div>
    </div>

<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    ue = UE.getEditor('f_content');
</script>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer'], function() {
        var layer = layui.layer,
            $ = layui.jquery;
        $(window).on('load', function() {
            //编辑功能
            //显示
            $(".modify_btn").click(function(){
                var show_box = $(this).parent().parent().parent().parent();
                var modify_box = show_box.next(".modify_box");

                var faq_id = modify_box.find(".faq_id").attr("value");

                var name = "ue_"+faq_id;//生成变量名
                window[name] = UE.getEditor("f_content_"+faq_id);

                show_box.hide();
                modify_box.show();
                return false;
            });
            //提交
            $(".f_submit").click(function(){
                var modify_box = $(this).parent().parent();
                var show_box = modify_box.prev(".show_box");
                var faq_id = modify_box.find(".faq_id").val();
                var title = modify_box.find(".title").val();
                var editor = "ue_"+faq_id;
                var content_text = window[editor].getContent();

                $.ajax({
                    url:"{:url('admin/faq/modify')}",
                    data:{faq_id:faq_id,title:title,content:content_text},
                    type:'post',
                    async: false,
                    success:function(res) {
                        var data = res.data;
                        var updateHtml = '&nbsp;&nbsp;<span class="font_color">'+data.update_user+'</span>&nbsp;于&nbsp;<span>'+data.updatetime+'&nbsp;最后修改</span>';
                        show_box.find(".show_title").html("<h4>"+title+"</h4>");
                        show_box.find(".show_content").html(content_text);
                        show_box.find(".show_update").html(updateHtml);
                        layer.msg(res.msg);
                    }
                });

                modify_box.hide();
                show_box.show();
                return false;
            });
            //取消
            $(".f_cancle").click(function(){
                var modify_box = $(this).parent().parent();
                var show_box = modify_box.prev(".show_box");

                modify_box.hide();
                show_box.show();
                return false;
            });


            //新增功能
            //显示
            $(".f_add_btn").click(function(){
                var add_btn_box = $(this).parent().parent();
                var add_box = add_btn_box.prev(".add_box");

                add_btn_box.hide();
                add_box.show();
                return false;
            });
            //提交
            $(".f_add_submit").click(function(){
                var typeid = $("#typeid").attr("value");
                var groupid = $("#groupid").attr("value");
                var add_box = $(this).parent().parent();
                var add_btn_box = add_box.next(".add_btn_box");
                var title = add_box.find(".title").val();
                var content_text = ue.getContent();

                $.ajax({
                    url:"{:url('admin/faq/addFaq')}",
                    data:{typeid:typeid,groupid:groupid,title:title,content:content_text},
                    type:'post',
                    async: false,
                    success:function(res) {
                        layer.msg(res.msg);
                        if(res.code == 1) {
                            setTimeout(function(){
                                location.reload();
                            },1500)
                        }
                    }
                });

                return false;
            });
            //取消
            $(".f_add_cancle").click(function(){
                var add_box = $(this).parent().parent();
                var add_btn_box = add_box.next(".add_btn_box");

                add_box.hide();
                add_btn_box.show();
                return false;
            });


            //删除
            $(".del_btn").click(function(){
                var show_box = $(this).parent().parent().parent().parent();
                var modify_box = show_box.next(".modify_box");
                var faq_id = modify_box.find(".faq_id").attr("value");
                layer.confirm('确定删除吗?', function(index) {
                    $.ajax({
                        url:"{:url('admin/Faq/delFaq')}",
                        type:'post',
                        async: false,
                        data:{faq_id:faq_id},
                        success:function(res) {
                            layer.msg(res.msg);
                            if(res.code == 1) {
                                setTimeout(function(){
                                    location.reload();
                                },1500)
                            }
                        }
                    })
                });

                return false;
            });

        });
    });


</script>



</body>
</html>
